<template>
  <div>
    <router-link :to="{name:'classroom_detail', params: {id: parent_id}}">
      <li class="article-list-ul-li" @tap="getDetail(parent_id)">
        <div class="inner">
          <h3>{{ parent_title}}</h3>
          <p class="desc">
            {{ parent_content }}
          </p>
        </div>
      </li>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: "listitem",
    methods: {
      getDetail(parent_id) {
        this.$router.push({name: 'classroom_detail', params: {id: parent_id}});
      },
    },
    data() {
      return {
        parent_img: '',
        parent_title: '',
        parent_date: '',
        parent_content: '',
        parent_id: ''
      }
    },
    props: [
      'imageurl',
      'title',
      'createtime',
      'introduction',
      'ids',
    ],
    created() {
      this.parent_img = this.imageurl;
      this.parent_title = this.title;
      this.parent_date = this.createtime;
      this.parent_content = this.introduction.slice(0, 47) + '...';
      this.parent_id = this.ids;
    },
  }
</script>

<style scoped>

  .article-list-ul-li .inner {
    border-bottom: 0.01467rem solid #d9d9d9;
  }

  .article-list-ul-li .inner h3 {
    font-size: 0.30rem;
    color: #666666;
    margin-bottom: 0.26667rem;
    line-height: 1.3;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 15px;
  }

  .article-list-ul-li .inner .desc {
    font-size: 0.25rem;
    color: #999999;
    line-height: 0.46rem;
    margin-bottom: 0.3rem;
  }
</style>
